<template>
  <div class="index">
    <div class="logo">温州非遗go</div>
    <van-search v-model="value" shape="round" background="transparent" placeholder="请输入搜索内容" @search="onSearch" />
    <!-- <div class="box">
      <div class="box_list">
        <div class="box_list_item" v-for="item in shanhuList" :key="item.fyclassdataid"
          @click="toshxq(item.fyclassdataid)">
          <img :src="item.picurl" alt="">
          <div class="content">
            <div class="title">
              {{ item.shmc }}
            </div>
            <div class="depict" v-html="item.shjj"></div>
            <div class="tip">
              <span class="c_1">{{ item.codename }}</span>
              <span class="c_2">{{ item.areaname }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="more" @click="tosh()">
        <span>查看更多</span>
        <i></i>
      </div>
    </div> -->
    <div class="home_swipe">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
    </div>


    <div class="commercial_tenant">
      <div class="top">
        <div class="title">非遗商户</div>
        <div class="more" @click="tosh()">
          <span>查看更多</span>
          <i></i>
        </div>
      </div>
      <div class="cont1" v-for="(item, index) in shanhuList" :key="item.RowNumber" @click="toshxq(item.fyclassdataid)">
        <img :src="item.picurl" alt="" />
        <div class="ri">
          <div class="ri1">
            <div class="r11">{{ item.shmc }}</div>
            <div class="r12">
              <span class="c_1">{{ item.codename }}</span>
              <van-tag style="margin-left: 0.625rem" text-color="#D19C4F" color=" #FFD19C4F">{{ item.areaname }}</van-tag>
            </div>
          </div>
          <div class="ri2" v-if="item.shjj">
            {{ filtertt(item.shjj) }}
          </div>
        </div>
      </div>
    </div>

    <div class="goods">
      <div class="top">
        <div class="title">非遗商品</div>
        <div class="more" @click="tosp()">
          <span>查看更多</span>
          <i></i>
        </div>
      </div>
      <section>
        <figure v-for="(item, index) in shanpinList" :key="item.RowNumber" @click="tospxq(item.fyclassdataid)">
          <img :src="item.picurl" alt="">
          <div class="goods_info">
            <div class="title">{{ item.spmc }}</div>
            <div class="price">
              <em>￥</em>
              <span>{{ item.spJiage }}</span>
            </div>
          </div>
        </figure>
      </section>
    </div>

    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="gift-o">商户</van-tabbar-item>
      <van-tabbar-item icon="shop-o">商品</van-tabbar-item>
      <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { getShList, getSpList, getdlzt, postSaveVisit, getUser } from "@/api/api.js";
import Vue from 'vue';
import { Lazyload } from 'vant';
Vue.use(Lazyload);
export default {
  name: '',
  data() {
    return {
      value: '',
      active: 0,
      shanhuList: [],
      shanpinList: [],
      user: JSON.parse(localStorage.getItem('userlogin')),
      images: [
        require("../assets/images/banner_1.png")
      ],
    };
  },
  created() {
    this.shList()
    this.spList()
    // if(localStorage.getItem('userlogin')){
    //   this.shList()
    //   this.spList()
    // }else{
    //    this.$router.push({ path: "/index", query: { } });
    // }
    this.postSaveVisit()
    // this.getCode()
  },
  mounted() {
    
  },
  methods: {
    getCode() {
      let code = this.getUrlCode().code; //拿到截取的code
      let redirect_uri = encodeURI('https://jsc.wzfeiyi.cn/fygo')
      let appid = "wx77dec9047c8c94d9";
      let wx_url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
      // window.location.href = wx_url;
      if (code == null || code === "") {
        window.location.href = wx_url
      } else {
        this.getOpenid(code) //此方法是将拿到得code传入获取openid得方法内
      }
      // http://192.168.2.186:8080/#/home

      // {"msg":"操作成功","code":200,"data":{"country":"","yhid":29,"province":"","city":"","openid":"oV-_e0pwtD5aFkjrc-7lJr2gxo14","sex":0,"nickname":"龍","headimgurl":"https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83eoLRLdGyNP7TmRn9RBF63unK8aCKOCic65fkJZNArAiazdAQ2DicgDfSKd2xKg1rKiaGGfBvkZKftj0Xw/132"}}
    },
    getUrlCode() {
      var url = location.search;
      var theRequest = new Object();
      if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
        }
      }
      return theRequest;
    },
    async getOpenid(code){
      console.log('code===', code);
      let res  = await getUser({
        code: code
      })
      console.log('微信授权登录返回==',res);
      if(res.data.code == 200){
        localStorage.setItem('userlogin', JSON.stringify(res.data.data))
      }
    },
    filtertt(text) {
      var reg = /<[^<>]+>/g; //1、全局匹配g肯定忘记写,2、<>标签中不能包含标签实现过滤HTML标签
      text = text.replace(reg, ""); //替换HTML标签
      text = text.replace(/&emsp;/gi, ""); //替换HTML空格
      text = text.replace(/&nbsp;/gi, "");
      return text;
    },
    async postSaveVisit() {  //浏览监听
      let res = await postSaveVisit({
        yhid: this.user.id || this.user.yhid,
        lx: 1
      })
    },
    tosq() {
      this.$router.push({ path: "/code", query: {} });
    },

    toshxq(id) {
      this.$router.push({ path: "/merchantXq", query: { id: id } });
    },
    tospxq(id) {
      this.$router.push({ path: "/goodsXq", query: { id: id } });
    },
    tosh() {
      this.$router.push({
        path: "/merchant"
      })
    },
    tosp() {
      this.$router.push({
        path: "/goods"
      })
    },
    async shList() {
      let res = await getShList({
        pageIndex: 1,
        pageSize: 3
      })
      // console.log('res==', res);
      if (res.code == 200) {
        this.shanhuList = res.data.list
      }
    },
    async spList() {
      let res = await getSpList({
        pageIndex: 1,
        pageSize: 4
      })
      // console.log('res==', res);
      if (res.code == 200) {
        this.shanpinList = res.data.list
      }
    },
    onChange(index) {
      console.log(index);
      if (index == 1) {
        this.$router.push({
          path: "/merchant"
        })
      } else if (index == 2) {
        this.$router.push({
          path: "/goods"
        })
      } else if (index == 3) {
        this.$router.push({
          path: "/my"
        })
      }
    },
    onSearch() {
      this.$router.push({
        path: "/search",
        query: {
          value: this.value
        }
      })
    }
  },
}
</script>
<style scoped lang="scss">
.index {
  width: 100%;
  height: 100%;
  background: url('../assets/images/bj.png') no-repeat;
  background-size: 100% 100%;

  .logo {
    font-size: 1rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 1.125rem;
    padding: 2.25rem 0 1.125rem 1.125rem;
  }

  ::v-deep .van-search__content {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #FFFFFF;
  }

  ::v-deep .van-search {
    padding: 0 1.125rem;
  }

  .box {
    margin-top: 2.875rem;

    .box_list {
      display: flex;
      justify-content: start;
      overflow-x: auto;
      padding: 0 .5625rem;

      .box_list_item {
        width: 19.9375rem;
        background: #fff;
        border-radius: .5rem;
        margin: 0 .5625rem;

        img {
          width: 19.9375rem;
          height: 9.6875rem;
          border-radius: .5rem .5rem 0 0;
          object-fit: cover;
        }

        .content {
          padding: 1.125rem 1.125rem .625rem 1.125rem;

          .title {
            font-size: 1rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #3D3D3D;
            line-height: 1.375rem;
            padding-bottom: .625rem;
          }

          .depict {
            height: 2.125rem;
            font-size: .75rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 1.0625rem;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }

          .tip {
            margin-top: .875rem;

            span {
              font-size: .625rem;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              line-height: 14px;
              border-radius: .125rem;
              padding: .125rem .3125rem;
            }

            .c_1 {
              color: #6CAAFE;
              background: rgba(108, 170, 254, 0.2);
              margin-right: .5625rem;
            }

            .c_2 {
              color: #D19C4F;
              background: rgba(209, 156, 79, 0.2);
            }
          }
        }
      }
    }

    .more {
      margin-top: 1.625rem;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        font-size: .875rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #6CAAFE;
        // line-height: 1.25rem;
        padding-right: .3125rem;
      }

      i {
        width: .4375rem;
        height: .75rem;
        background: url('../assets/images/arrows_1.png') no-repeat;
        background-size: 100% 100%;
        display: block;
      }
    }
  }

  .home_swipe {
    width: 21.875rem;
    // height: 160px;
    margin: 0 auto;
    margin-top: 1.0625rem;

    img {
      width: 100%;
      height: 10rem;
      border-radius: .625rem;
    }
  }

  .commercial_tenant {
    margin: 0 1rem;
    margin-top: 1.375rem;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 1.125rem;
      margin-bottom: .9375rem;

      .title {
        font-size: 1.125rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 1.5625rem;
      }

      .more {
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          font-size: .75rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          padding-right: .3125rem;
        }

        i {
          width: .4375rem;
          height: .75rem;
          background: url('../assets/images/arrows_2.png') no-repeat;
          background-size: 100% 100%;
          display: block;
        }
      }
    }

    .cont1 {
      display: flex;
      width: calc(100% - 1.5rem);
      padding: 0.75rem;
      background: #ffffff;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
      border-radius: 0.5rem;
      margin-bottom: 0.75rem;

      img {
        width: 7.5rem;
        height: 5.625rem;
        border-radius: 0.5rem;
      }

      .ri {
        width: calc(100% - 8.5625rem);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left: 1.0625rem;

        .ri1 {
          width: 100%;

          .r11 {
            width: 100%;
            font-size: 1rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 1.375rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
          }

          .r12 {
            width: 100%;
            display: flex;
            padding-top: 0.375rem;

            .c_1 {
              color: #6CAAFE;
              background: rgba(108, 170, 254, 0.2);
              // margin-right: .5625rem;
              font-size: .75rem;
              padding: 0 .2rem;
              border-radius: .125rem;
            }
          }
        }

        .ri2 {
          width: 100%;
          font-size: 0.625rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 0.9375rem;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          display: -webkit-box;
          -webkit-box-orient: vertical;
        }
      }
    }
  }

  .goods {
    margin-top: 1.375rem;
    padding-bottom: 5rem;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 1.125rem;

      .title {
        font-size: 1.125rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 1.5625rem;
      }

      .more {
        display: flex;
        align-items: center;
        justify-content: center;

        span {
          font-size: .75rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          padding-right: .3125rem;
        }

        i {
          width: .4375rem;
          height: .75rem;
          background: url('../assets/images/arrows_2.png') no-repeat;
          background-size: 100% 100%;
          display: block;
        }
      }
    }

    section {
      margin: 0 auto;
      overflow: hidden;
      column-count: 2;
      column-gap: 0;
      margin-top: .8125rem;
      padding: 0 .3125rem;
    }

    figure {
      margin: 0 .5625rem .75rem;
      break-inside: avoid;
      background: #fff;
      border-radius: .5rem;
      box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
    }

    figure {
      img {
        width: 100%;
        border-radius: .5rem .5rem 0 0;
        display: block;
      }

      .goods_info {
        .title {
          font-size: .875rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #3D3D3D;
          line-height: 1.375rem;
          padding: .5625rem .3125rem 0 .3125rem;
        }

        .price {
          font-size: .75rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #F15712;
          padding: .5625rem 0 .4375rem .3125rem;

          span {
            font-size: 1.125rem;

            display: inline-block;
          }
        }
      }
    }
  }

  ::v-deep .van-tabbar-item {
    .van-icon-home-o:before {
      content: ''
    }

    .van-icon-friends-o:before {
      content: ''
    }

    .van-icon-gift-o:before {
      content: ''
    }

    .van-icon-shop-o:before {
      content: ''
    }

    .van-icon-home-o {
      width: 1.5rem;
      height: 1.375rem;
      background: url('../assets/images/home.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }

    .van-icon-friends-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../assets/images/my.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }

    .van-icon-gift-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../assets/images/2_1.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }

    .van-icon-shop-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../assets/images/1_2.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }
  }

  ::v-deep .van-tabbar-item--active {
    .van-icon-home-o:before {
      content: ''
    }

    .van-icon-home-o {
      width: 1.5rem;
      height: 1.375rem;
      background: url('../assets/images/on_home.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }

    .van-icon-friends-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../assets/images/on_my.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }

    .van-icon-gift-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../assets/images/2_2.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }

    .van-icon-shop-o {
      width: 1.375rem;
      height: 1.375rem;
      background: url('../assets/images/1_1.png') no-repeat;
      background-size: 100% 100%;
      display: block;
    }

    .van-tabbar-item__text {
      font-size: .625rem;
      font-family: SourceHanSansSC-Regular, SourceHanSansSC;
      font-weight: 400;
      color: #000000;
    }
  }

}</style>